<script lang="ts">
    import { getContext } from "svelte";
    import { useClassList } from "../utils/useClassList";
    import type { StepProps } from "./Steps";
    import { StepsContextKey } from "./Steps.svelte";
    import Icon from "../Common/Icons/Icon.svelte";

    const props: StepProps = $props();
    const ctx: any = getContext(StepsContextKey);

    const status = $derived.by((): string => {
        const current = ctx.getCurrent();
        if (props.status) {
            return props.status;
        }
        let ret: string = "";
        if (current + 1 > props.index) {
            ret = "finished";
        }
        if (current + 1 === props.index) {
            ret = "process";
        }
        return ret || "wait";
    });
    const done = $derived.by((): string => {
        const current = ctx.getCurrent();
        let ret: string = "";
        if (current + 1 > props.index) {
            ret = "done";
        }
        if (current + 1 === props.index) {
            ret = "active";
        }
        return ret;
    });

    const classList = $derived(
        useClassList(props, "cm-steps-item", {
            [`cm-steps-status-${status}`]: status,
            [`cm-steps-status-${done}`]: done,
        }),
    );
</script>

{#snippet inner()}
    {#if !props.icon}
        {#if status === "finished"}
            <div class="cm-step-head-inner"><Icon icon="check"></Icon></div>
        {:else if status === "error"}
            <span><Icon icon="xCircle" size={26}></Icon></span>
        {:else if status === "warning"}
            <span><Icon icon="warning" size={26}></Icon></span>
        {:else}
            <div class="cm-step-head-inner"><span>{props.index}</span></div>
        {/if}
    {:else}
        {@render props.icon()}
    {/if}
{/snippet}
<div class={classList} style={props.style}>
    <div class="cm-step-head">
        {@render inner()}
        <div class="cm-step-line"></div>
    </div>
    <div class="cm-step-main">
        <div class="cm-step-title">
            <span>{props.title}</span>
            <div class="cm-step-line"></div>
        </div>
        {#if props.description}
            <div class="cm-step-description">{props.description}</div>
        {/if}
    </div>
</div>
